<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.searchKey" :placeholder="$t('table.search')" clearable style="width: 150px" class="filter-item">
        <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value"/>
      </el-select>
      <el-input v-model="listQuery.searchValue" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
      <el-select v-model="listQuery.gender" placeholder="Gender" class="filter-item" style="width: 120px" >
          <el-option value="3" :label="$t('table_element.available.all')" />
          <el-option value="0" :label="$t('userfiles.unknown')" />
          <el-option value="1" :label="$t('userfiles.male')" />
          <el-option value="2" :label="$t('userfiles.female')" />
      </el-select>
      <el-select v-model="listQuery.is_available" placeholder="Available" clearable style="width: 120px" class="filter-item">
        <el-option v-for="(item, index) in availableOptions" :key="index" :label="item.label" :value="item.value"/>
      </el-select>
      <el-select v-model="listQuery.is_subscribe" placeholder="Subscription" clearable style="width: 120px" class="filter-item">
        <el-option v-for="(item, index) in subscribeOptions" :key="index" :label="item.label" :value="item.value"/>
      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">{{ $t('table.add') }}</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="danger" icon="el-icon-delete" @click="handleMulDelete">{{ $t('table.batch_delete') }}</el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-download"  @click="onDownLoad">{{ $t('table.download') }}</el-button>
    </div>

    <template>
      <el-tabs v-model="activeName" type="card" @tab-click="indexRecord">
        <el-tab-pane :label="$t('table.member')" name="first" >
          <el-table
            :data="list"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="35">
            </el-table-column>
            <el-table-column
              :label="$t('table.id')"
              align="center"
              width="65">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--:show-overflow-tooltip="true"-->
            <!--:label="$t('userfiles.area_id')"-->
            <!--align="center"-->
            <!--width="150">-->
            <!--<template slot-scope="scope">-->
            <!--<span>{{ scope.row.area_name }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column
              :show-overflow-tooltip="true"
              :label="$t('userfiles.first_name')"
              align="center"
              min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.first_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              :label="$t('userfiles.last_name')"
              align="center"
              min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.last_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.email')"
              align="center"
              prop="title"
              min-width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.email }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.mobile')"
              align="center"
              prop="title"
              min-width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.mobile }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.gender')"
              align="center"
              prop="gender"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.gender_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.logined_at')"
              align="center"
              prop="logined_at"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.logined_at }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('userfiles.logined_ip')"
              align="center"
              prop="logined_at"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.logined_ip }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('userfiles.Coupon')"
              align="center"
              prop="logined_ip"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.coupontotal }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.Orders')"
              align="center"
              prop="logined_ip"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.ordertotal }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.Subscription')"
              align="center"
              prop="logined_ip"
              width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.is_subscribe_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('table.actions')"
              align="center"
              width="550">
              <template slot-scope="scope">
                <el-button type="primary" size="small" class="el-icon-view" @click="showorder(scope.row.id)">{{ $t('table.Order') }}</el-button>
                <el-button type="primary" size="small" class="el-icon-view" @click="showusercoupon(scope.row.id)">{{ $t('Coupon') }}</el-button>
                <el-button type="primary" size="small" class="el-icon-edit" @click="handleUpdate(scope.row.id)">{{ $t('table.edit') }}</el-button>
                <el-button type="danger" size="small" class="el-icon-delete" @click="destroyRecord(scope.row)">{{ $t('table.delete') }}</el-button>
                <el-button type="primary" size="small" class="el-icon-edit" @click="setUserInfo(scope.row)">{{ $t('table.add_order') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('table.non_member')" name="second" >
          <el-table
            :data="list"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="35">
            </el-table-column>
            <el-table-column
              :label="$t('table.id')"
              align="center"
              width="65">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--:show-overflow-tooltip="true"-->
            <!--:label="$t('userfiles.area_id')"-->
            <!--align="center"-->
            <!--width="150">-->
            <!--<template slot-scope="scope">-->
            <!--<span>{{ scope.row.area_name }}</span>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column
              :show-overflow-tooltip="true"
              :label="$t('userfiles.first_name')"
              align="center"
              min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.first_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :show-overflow-tooltip="true"
              :label="$t('userfiles.last_name')"
              align="center"
              min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.last_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.email')"
              align="center"
              prop="title"
              min-width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.email }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('userfiles.mobile')"
              align="center"
              prop="title"
              min-width="80">
              <template slot-scope="scope">
                <span>{{ scope.row.mobile }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.gender')"
              align="center"
              prop="gender"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.gender_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.logined_at')"
              align="center"
              prop="logined_at"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.logined_at }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('userfiles.logined_ip')"
              align="center"
              prop="logined_at"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.logined_ip }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('userfiles.Coupon')"
              align="center"
              prop="logined_ip"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.coupontotal }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.Orders')"
              align="center"
              prop="logined_ip"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.ordertotal }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('userfiles.Subscription')"
              align="center"
              prop="logined_ip"
              width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.is_subscribe_name }}</span>
              </template>
            </el-table-column>

            <el-table-column
              :label="$t('table.actions')"
              align="center"
              width="550">
              <template slot-scope="scope">
                <el-button type="primary" size="small" class="el-icon-view" @click="showorder(scope.row.id)">{{ $t('table.Order') }}</el-button>
                <el-button type="primary" size="small" class="el-icon-view" @click="showusercoupon(scope.row.id)">{{ $t('Coupon') }}</el-button>
                <el-button type="primary" size="small" class="el-icon-edit" @click="handleUpdate(scope.row.id)">{{ $t('table.edit') }}</el-button>
                <el-button type="danger" size="small" class="el-icon-delete" @click="destroyRecord(scope.row)">{{ $t('table.delete') }}</el-button>
                <el-button type="primary" size="small" class="el-icon-edit" @click="setUserInfo(scope.row)">{{ $t('table.add_order') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </template>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="indexRecord"/>

    <detail ref="detail" :is-edit="isEdit" :edit-id="editId" @indexRecord="indexRecord"/>

    <template>
      <el-dialog :visible.sync="dialogusercouponVisible" title="Usercoupon" width="80%">
        <el-table
          :data="usercouponlist"
          border
          fit
          highlight-current-row
          style="width: 100%">
          <el-table-column
            :label="$t('table.id')"
            align="center"
            width="50">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.available')"
            align="center"
            width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.available_name }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('usercouponfiles.is_used')"
            align="center"
            width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.status_name }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :show-overflow-tooltip="true"
            :label="$t('usercouponfiles.coupon_id')"
            align="center"
            width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.coupon_name }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('usercouponfiles.user_id')"
            align="center"
            min-width="160px">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.start_date')"
            align="center"
            min-width="160px">
            <template slot-scope="scope">
              <span>{{ scope.row.start_date }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.end_date')"
            align="center"
            min-width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.end_date }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.used_time')"
            align="center"
            min-width="100px">
            <template slot-scope="scope">
              <span>{{ scope.row.used_time }}</span>
            </template>
          </el-table-column>

        <!--<el-table-column-->
        <!--:label="$t('table.actions')"-->
        <!--align="center"-->
        <!--width="230">-->
        <!--<template slot-scope="scope">-->
        <!--&lt;!&ndash;<el-button type="primary" size="small" class="el-icon-edit" @click="handleUpdate(scope.row.id)">{{ $t('table.edit') }}</el-button>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button type="danger" size="small" class="el-icon-delete" @click="destroyRecord(scope.row)">{{ $t('table.delete') }}</el-button>&ndash;&gt;-->
        <!--</template>-->
        <!--</el-table-column>-->
        </el-table>

        <pagination v-show="usercoupontotal>0" :total="usercoupontotal" :page.sync="usercouponlistQuery.page" :limit.sync="usercouponlistQuery.limit" @pagination="showusercoupon(0)" />
      </el-dialog>

    </template>
  </div>
</template>

<script>
import userApi from '@/api/user/user'
import usercouponApi from '@/api/coupon/usercoupon'
import Detail from './components/Detail'
import { parseTime, urlEncode } from '@/utils'
import waves from '@/directive/waves' // Waves directive
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import i18n from '@/lang/index'

export default {
  name: 'Article',
  components: { Pagination, Detail },
  directives: { waves },
  filters: {
  },
  data() {
    return {
      tableKey: 0,
      list: [],
      user_ids: [],
      total: 0,
      listLoading: true,
      listQuery: {
        gender: '3',
        lang: i18n.locale,
        page: 1,
        pagesize: 20,
        limit: 20,
        is_available: 2,
        is_subscribe: 2,
        title: '',
        sort: 'desc',
        orderby: 'id',
        searchKey: 'first_name',
        searchValue: ''
      },
      availableOptions: [
        { 'label': i18n.t('table_element.available.all'), 'value': 2 },
        { 'label': i18n.t('table_element.available.on'), 'value': 1 },
        { 'label': i18n.t('table_element.available.un'), 'value': 0 }
      ],
      subscribeOptions: [
        { 'label': i18n.t('table_element.custom.all'), 'value': 2 },
        { 'label': i18n.t('table_element.custom.yes'), 'value': 1 },
        { 'label': i18n.t('table_element.custom.no'), 'value': 0 }
      ],
      editId: 0,
      isEdit: false,
      searchOptions: [
        { value: 'first_name', label: i18n.t('userfiles.first_name') },
        { value: 'last_name', label: i18n.t('userfiles.last_name') },
        { value: 'mobile', label: i18n.t('userfiles.mobile') },
        { value: 'email', label: i18n.t('userfiles.email') },
        // { value: 'gender', label: i18n.t('userfiles.gender') }
      ],
      dialogusercouponVisible: false,
      usercouponlist: [],
      usercoupontotal: 0,
      usercouponlistQuery: {
        lang: i18n.locale,
        page: 1,
        pagesize: 20,
        is_available: 2,
        is_subscribe: 2,
        limit: 20,
        name: '',
        sort: 'desc',
        orderby: 'id',
        searchKey: 'user_id',
        searchValue: '',
        register_type: 1
      },
      activeName: 'first'
    }
  },
  created() {
    this.indexRecord()
  },
  methods: {

    handleFilter() {
      this.listQuery.page = 1
      this.indexRecord()
    },

    handleCreate() {
      this.$refs.detail.handShowDetailDialog(0)
    },

    handleUpdate(id) {
      this.$refs.detail.handShowDetailDialog(id)
    },

    indexRecord() {
      this.user_ids = [],
      this.listLoading = true

      if (this.activeName === 'second') {
        this.listQuery.register_type = 0
      } else {
        this.listQuery.register_type = 1
      }

      userApi.indexRecord(this.listQuery).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.list = serviceResponse.data.data
          this.total = serviceResponse.data.total
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    destroyRecord(row) {
      this.$confirm('Confirm deletion?', 'Message', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(() => {
        userApi.destroyRecord(row.id).then(response => {
          const serviceResponse = response.data
          if (serviceResponse.code === 0) {
            this.$message({
              type: 'success',
              message: 'success!'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          } else {
            this.$message({
              type: 'error',
              message: 'error!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: ' Canceled deletion'
        })
      })
    },
      handleMulDelete() {
        this.$confirm('Confirm deletion?', 'Message', {
          confirmButtonText: 'Confirm',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          userApi.mulDestroyRecord({ user_id: this.user_ids }).then(response => {
            var data = response.data
            if (data.code == 0) {
              this.$notify({
                title: 'Success',
                message: 'Delete Success!',
                type: 'success',
                duration: 2000
              })
              this.getList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Cancel'
          })
        })
      },
    handleSelectionChange(val) {
      val.forEach(element => {
        if (this.user_ids.indexOf(element.id) == -1) {
          this.user_ids.push(element.id)
        }
      })
    },
    showorder(userid) {
      this.$router.push({ path: 'order', query: { user_id: userid }})
    },

    showusercoupon(userid) {
      if (userid > 0) {
        this.usercouponlistQuery.searchValue = userid
      }
      this.dialogusercouponVisible = true
      usercouponApi.indexRecord(this.usercouponlistQuery).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.usercouponlist = serviceResponse.data.data
          this.usercoupontotal = serviceResponse.data.total
        }
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },

    closeusercoupon() {

    },
    onDownLoad() { //跳转下载页
      let query = urlEncode(this.listQuery)
      let url = process.env.BASE_API + '/admin/user-export?1=1' + query
      window.open(url)
    },
    setUserInfo(data) {
      this.$store.dispatch('setUserinfo', data)
      this.$store.dispatch('setStatus', 1)
      this.$nextTick(() => {
        this.$router.push({ path: '/order' })
      })
    }
  }
}
</script>
